var username = getCookie('username')
if (username) {
    $('.n_left').children().eq(1).remove();
    $('.n_left').children().eq(0).after($('<b>欢迎<a href="#"style="margin:4px;">' + username + '</a>来到天猫</b>'))
    $('.n_left').children().last().remove();
    $('.n_left').children().last().after($('<a href="#">退出</a>'))
    $('.n_left').children().last().click(function () {
        var conindex = layer.confirm('你确定要退出吗',{
            btn: ['残忍离开', '依依不舍']
        }, function () {
            removeCookie("username")
            $('.n_left').children().eq(1).remove();
            $('.n_left').children().eq(0).after($('<a href="./login.html">请登录</a>'))
            $('.n_left').children().last().remove();
            $('.n_left').children().last().after($('<a href="./register.html">免费注册</a>'))
            layer.close(conindex)
        },function(){
            layer.msg('留下来了',{
                icon:1,
                time:1000
            })
        })


        return false

    })
}

var arr = location.search.match(/cat=(\d+)/)
if(!arr){
    // 显示所有分类数据
    var cat = 'all'
}else{
    // 指定分类的数据
    var cat = arr[1]
}
var loadindex = layer.load(0,{
    shade:['#000',]
})
getData(cat)

function getData(cat){
    $.ajax({
        data:{cat},
        url:'./php/list.php',
        dataType:'json',
        success:res=>{
            var {data} = res;
            if(data.length){
                // 给数据做分页显示
                var pageSize = 4;
                new Page('fenye',{
                    first:"首页",
                    previous:"上一页",
                    next:"下一页",
                    last:"尾页"
                },{
                    total:data.length,
                    pageSize
                },function(currentPage){
                    var arr = data.slice((currentPage-1)*pageSize,currentPage*pageSize)
                    var str = '';
                    arr.forEach(item=>{
                        str += `
                            <div class="col-lg-3 col-md-4 col-sm-6 col-xs-12">
                                <div class="thumbnail">
                                    <img src="${item.img}" width="100%" height="200">
                                    <div class="caption">
                                    <h3>${item.name}</h3>
                                    <p style="color:red;">￥${item.price}</p>
                                    <p><a href="detail.html?id=${item.id}" class="btn btn-primary" role="button">立即购买</a></p>
                                    </div>
                                </div>
                            </div>
                        `
                    })
                    $('.goods .row').html(str)
                    layer.close(loadindex)
                })
                
            }else{
                layer.close(loadindex)
                // 提示当前分类下没有商品区首页重新查看分类
                $('.goods').html(`
                <div class="jumbotron">
                    <h1>当前分类下暂无商品!</h1>
                    <p>请移步首页重新查看分类</p>
                    <p><a class="btn btn-primary btn-lg" href="index.html" role="button">去首页</a></p>
                </div>
                `)
            }
        }
    })
}
